<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-message"></i> 商品列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-button type="primary" round @click="urlAdd"><i class="el-icon-plus"> </i>&nbsp;&nbsp;新增商品</el-button>
            <div style="height:40px"></div>
                <el-form :inline="true"  class="demo-form-inline">
                    <el-form-item label="商品标题:">
                        <el-input v-model="title" placeholder="请输入商品标题" style="width:300px;"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSelect"> &nbsp;&nbsp;查询&nbsp;&nbsp;  </el-button>
                        <el-button type="primary" @click="onResetting"> &nbsp;&nbsp;重置&nbsp;&nbsp;  </el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="tableData"  style="width: 100%"   ref="multipleTable">
                    <el-table-column prop="id" label="ID" width="50" align="center">
                    </el-table-column>
                    <el-table-column label="封面图" width="170" align="center">
                        <template slot-scope="scope">
                            <img :src="scope.row.head_img" style="width:160px;height:80px;"/>
                        </template>
                    </el-table-column>
                    <el-table-column prop="goods_name" label="商品名称"  align="center">
                    </el-table-column>
                    <el-table-column prop="total_stock" label="总库存"  width="80" align="center">
                    </el-table-column>
                    <el-table-column prop="selled_stock" label="已卖数量" width="80" align="center">
                    </el-table-column>
                    <el-table-column prop="create_time" label="发布时间"  width="120" align="center">
                    </el-table-column>
                    <el-table-column label="操作" width="200" align="center" >
                        <template slot-scope="scope" >
                            <el-button size="small" type="text" @click="handleSel(scope.$index, scope.row)" >查看</el-button>
                            <el-button class="edit" size="small" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button class="del" size="small" type="text"  @click="handleDelete(scope.$index, scope.row)" >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination" >
                    <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :page-size="pageSize" :total="totalElements" background>
                    </el-pagination>
                </div>
                
        </div>
        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
        <!-- / 删除提示框 -->
    </div>
</template>
<script>
import { getGoodList, postGoodDelete } from "@/api/goods/goods";
export default {
  name: "goods",
  data() {
    return {
      pageIndex: 1, //当前页码
      pageSize: 10, //每页10条
      totalElements: 1, //默认的总条数
      totalPages: 1, //默认的总页数
      tableData: [], //表格数据
      delIndex: 0, //当前选中的下标
      delId: 0, //当前要删除的Id
      delVisible: false, //默认dialog 不弹出
      title: "" //商品标题
    };
  },
  //实例创建
  created() {
    //
    this.getDate();
  },
  //计算属性
  computed: {},
  //方法
  methods: {
    //获取数据
    getDate() {
      getGoodList(this.title, this.pageIndex, this.pageSize).then(response => {
        if (response.code == 200) {
          var data = response.data; //当前返回的数据
          this.tableData = data.list; //列表数据
          this.totalElements = data.total; //总条数
          this.totalPages = Math.ceil(data.total / this.pageSize); //总页数
        } else {
          this.$notify.error({
            title: "异常",
            offset: 100,
            message: response.msg
          });
        }
      });
    },
    //把状态改中文
    format(row){
        let value=row.state; //状态：0上架、1下架
        if(value==0){
            return '上架'
        }else{
            return '下架'
        }
    },
    //新增商品
    urlAdd() {
      this.$router.push({ path: "/goods/add" });
    },
    //查询
    onSelect() {
      this.pageIndex = 1;
      this.getDate();
    },
    //重置筛选条件
    onResetting() {
      this.state = "";
      this.userName = "";
      this.title = "";
      this.getDate();
    },
    //分页
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getDate();
    },
    //查看
    handleSel(index, row) {
      if (row.id && row.id > 0) {
        //跳转到商品详情
        this.$router.push({ path: "/goods/new/select?goodsId=" + row.id });
      }
    },
    //编辑
    handleEdit(index, row) {
      if (row.id && row.id > 0) {
        //跳转到商品编辑
        this.$router.push({ path: "/goods/edit",query:{goodsId:row.id }});
      }
    },
    //删除
    handleDelete(index, row) {
      // console.log(index,row.id);
      if (row.id && row.id > 0) {
        this.delIndex = index; //要删除的下标
        this.delId = row.id; //要删除的ID
        this.delVisible = true; //显示兑换弹出框
        //console.log(this.delVisible);
      } else {
        // console.log("没触发");
      }
    },
    // 确定删除
    deleteRow() {
      if (this.delId > 0) {
        postGoodDelete(this.delId).then(response => {
          if (response.code == 200) {
            this.tableData.splice(this.delIndex, 1);
            this.$message.success("操作成功");
            this.delVisible = false;
          } else {
            this.$notify.error({
              title: "操作失败",
              duration: 2000,
              message: "失败原因：" + response.data.msg
            });
          }
        });
      }
    }
  },
  filters: {
    state: function (value) {
        // console.log(value);
        // debugger
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    }
}
};
</script>
<style lang="stylus" scoped>
.edit {
    color: #ff9800;
}

.del {
    color: #e51c23;
}

.download {
    color: #67C23A;
}
</style>


